<template>
    <el-select
        v-model="selectedValue"
        placeholder="请选择预案名称"
        @change="handleChange"
        clearable
    >
        <el-option
            v-for="item in planNameList"
            :key="item.planId"
            :label="item.planname"
            :value="item.planId"
        />
    </el-select>
</template>

<script setup>
// 接收v-model传入的值
import {getPlanNameSelectList} from "@/api/PlanManage/Plan.js";

const props = defineProps({
    modelValue: [String, Number], // 定义modelValue类型，可以根据需求调整
})

// 触发父组件更新v-model
const emit = defineEmits(['update:modelValue'])

// 本地的选中的值
const selectedValue = ref(null);

// 监听下拉框变化并触发事件
const handleChange = (value) => {
    emit('update:modelValue', value)
}

const planNameList = ref({})

// 监听 modelValue 的变化，并在数据加载完成后赋值
watch(() => props.modelValue, (newValue) => {
    if (planNameList.value.length > 0) {
        selectedValue.value = newValue;
    }
});

// 监听数据加载情况，加载完成后再设置默认值
watch(planNameList, (newList) => {
    if (newList.length > 0 && props.modelValue) {
        selectedValue.value = props.modelValue;
    }
});

// 获取预案名称下拉数据
const getPlanNameList = async () => {
    const res = await getPlanNameSelectList()
    planNameList.value = res.rows
}

nextTick(() => {
    // 初始化获取数据
    getPlanNameList()
})

</script>

<style scoped lang="scss">

</style>